<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Example ul element</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
     
     <div id="main">
        <h1>Cancel Example</h1>

        <div class="status">
            <p v-if="canDrag!=null"  :class="canDrag? 'ok' : 'ko'">
                can Drag: {{canDrag}} future index {{futureIndex}}
            </p>
            <p v-else>
                No drag operation
            </p>
        </div>
        

        <div class="drag">
            <h2>List 1 draggable</h2>
            <draggable element="ul" class="dragArea" :list="list" :options="{group:'people'}" :move="checkMove" @end="endDrag" @start="startDrag">           
                <li v-for="(element, index) in list" :class="{'target': element===targetElement, 'ok':canDrag  , 'ko':!canDrag}">
                    {{element.name}} {{index}}
                </li>
             </draggable>

           <h2>List 2 draggable</h2>
            <draggable class="dragArea" :list="list2" :options="{group:'people'}" :move="checkMove" @end="endDrag">
                <transition-group tag="div" class="dragArea" name="list-complete">
                    <div v-for="(element, index) in list2" :class="{'target': element===targetElement, 'ok':canDrag  , 'ko':!canDrag}" :key="element.name" >
                        {{element.name}}
                    </div>
                </transition-group>
             </draggable>
         </div>

        <div class="normal">
            <h2>List 1 v-for</h2>
            <div>
                <div v-for="element in list" >{{element.name}}</div>
             </div>

            <h2>List 2 v-for</h2>
            <div>
                <div v-for="element in list2" >{{element.name}}</div>
             </div>
        </div>

        <a href="index.html">See basic example</a>
        <a href="Two_Lists_Clone.html">See clone element example</a>
        <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
    </div>
        <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
        <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
        <script type="text/javascript" src="src\vuedraggable.js"></script>
        <script type="text/javascript" src="script\cancel.js"></script>
    </body>
</html>